// pages/echarts/echarts.js
import * as echarts from '~/components/ec-canvas/echarts';
const initFilters = {
  overall: 1,
  sorts: '',
  layout: 0,
};
// 初始化图表函数  开始
let chart2 = null;
let chart3 = null;
const MAX = [6000, 6000, 6000, 6000, 6000, 5000, 4000, 3000, 2000, 4000, 3000, 2000]
const VALUE = [2012, 1230, 3790, 2349, 1654, 1230, 3790, 2349, 1654, 3790, 2349, 1654]
var option3 = {
  title: {
    text: '年度数据报表',
    textStyle: {
      fontSize: 14
    }
  },
  color: ["#3398DB"],
  legend: {

  },
  tooltip: {
    trigger: "axis"
  },
  xAxis: {
    data: ["2014-07-14", "2014-07-15", "2014-07-16", "2014-07-17", "2014-07-18"],

  },
  grid: {
    left: '1%',
    right: '2%',
    bottom: '3%',
    containLabel: true
  },
  yAxis: {
    splitLine: {
      show: true
    },
    axisLine: {
      show: true,
    },
  },
  dataZoom: [{
    id: 'dataZoomY',
    xAxisIndex: [0],
    show: false, //是否显示滑动条，不影响使用
    type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
    startValue: 0, // 从头开始。
    endValue: 10, // 一次性展示5个
    height: 3,
    borderColor: 'transparent',
    fillerColor: 'rgba(205,205,205,1)',
    zoomLock: true,
    showDataShadow: false, //是否显示数据阴影 默认auto
    backgroundColor: '#fff',
    showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
    realtime: true, //是否实时更新
    filterMode: 'filter',
    handleIcon: 'circle',
    handleStyle: {
      color: 'rgba(205,205,205,1)',
      borderColor: 'rgba(205,205,205,1)',
    },
    // handleSize: '80%',
    moveHandleSize: 0,
    // maxValueSpan: "2014-02-24",
    // minValueSpan: 4,
    brushSelect: false, //刷选功能，设为false可以防止拖动条长度改变 ************（这是一个坑）
  }, {
    type: 'inside',
    xAxisIndex: 0,
    zoomOnMouseWheel: false, //滚轮是否触发缩放
    moveOnMouseMove: true, //鼠标滚轮触发滚动
    moveOnMouseWheel: true
  }],
  series: {
    name: "刘伟",
    type: "bar",
    data: [156, 140, 133, 186, 182]
  }
}

var option = {
  title: {
    text: '销售统计数据',
    textStyle: {
      fontSize: 14
    }
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  legend: {
    data: ['销售A', '销售B', '销售C', '销售D'],
    top: '18',
    left: 0,
    textStyle: {
      fontSize: 10
    }
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  grid: {
    left: '1%',
    right: '2%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [{
    type: 'category',
    boundaryGap: false,
    axisLine: {
      show: true,
    },
    data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月']
  }],
  yAxis: [{
    type: 'value',
    axisLine: {
      show: true,
    },
  }],
  series: [{
      name: '销售A',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: '销售B',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: '销售C',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [150, 232, 201, 154, 190, 330, 410]
    },
    {
      name: '销售D',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [320, 332, 301, 334, 390, 330, 320]
    },
    {
      name: '销售E',
      type: 'line',
      stack: 'Total',
      label: {
        show: true,
        position: 'top'
      },
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [820, 932, 901, 934, 1290, 1330, 1320]
    }
  ]
};

function initChart2(canvas, width, height, dpr) {
  chart2 = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr
  })
  canvas.setChart(chart2);
  chart2.setOption(option);
  return chart2;
}

function initChart(canvas, width, height, dpr) {
  chart3 = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr
  })
  canvas.setChart(chart3);
  chart3.setOption(option3);
  return chart3;
}

Page({

  /**
   * 页面的初始数据
   */
  data: {
    ec2: {
      onInit: initChart2
    },
    ec3: {
      onInit: initChart
    },
    layout: 0,
    sorts: '',
    overall: 1,
    show: false,
    minVal: '',
    maxVal: '',
    filter: initFilters,
    hasLoaded: false,
    loadMoreStatus: 0,
    loading: true,
    histogramData3: []
  },


  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    this.getTabBar().init();
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  },

  showFilterPopup() {
    this.setData({
      show: true,
    });
  },

  showFilterPopupClose() {
    this.setData({
      show: false,
    });
  },
})